<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入框内容放入本地储存</title>
</head>

<body>
    <div>
        <input type="text" placeholder="请输入昵称" id="name">
    </div>
    <div>
        <textarea placeholder="请文明留言" id="message" cols="30" rows="10"></textarea>
    </div>
    <div>
        <button id="send">提交</button>
    </div>

    <script>
        let btnEle = document.getElementById('send');
        let msgEle = document.getElementById('message');
        let nameEle = document.getElementById('name');

        btnEle.addEventListener('click', () => {
            let nikename = nameEle.value;
            let message = msgEle.value;

            // 只能获取单独一条，后者覆盖前者
            // localStorage.setItem('nikename', JSON.stringify(nikename));
            // localStorage.setItem('message', JSON.stringify(message));

            // 优化;
            // Date.now()是获取时间戳,key唯一，昵称和内容放在对象里
            let key = Date.now();
            let msgObj = { nikename, message };     //对象简写
            localStorage.setItem(key, JSON.stringify(msgObj));

            // 清空输入框内的内容
            nameEle.value = '';
            msgEle.value = '';

        });
    </script>
</body>

</html>